import 'package:flutter/material.dart';
import '../theme/app_theme.dart';

/**
 * 响应式布局管理器
 * 根据屏幕尺寸自动切换不同的布局模式
 */
class ResponsiveLayout extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget desktop;
  final UIMode? forceMode;

  const ResponsiveLayout({
    Key? key,
    required this.mobile,
    this.tablet,
    required this.desktop,
    this.forceMode,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 如果强制指定模式，则使用指定模式
        if (forceMode != null) {
          switch (forceMode!) {
            case UIMode.mobile:
              return mobile;
            case UIMode.tablet:
              return tablet ?? mobile;
            case UIMode.desktop:
              return desktop;
            case UIMode.auto:
              break;
          }
        }

        // 自动模式：根据屏幕宽度选择布局
        if (constraints.maxWidth < ResponsiveBreakpoints.mobile) {
          return mobile;
        } else if (constraints.maxWidth < ResponsiveBreakpoints.desktop) {
          return tablet ?? mobile;
        } else {
          return desktop;
        }
      },
    );
  }
}

/**
 * 响应式值选择器
 * 根据屏幕尺寸返回不同的值
 */
class ResponsiveValue<T> {
  final T mobile;
  final T? tablet;
  final T desktop;

  const ResponsiveValue({
    required this.mobile,
    this.tablet,
    required this.desktop,
  });

  /**
   * 根据上下文获取对应的值
   */
  T getValue(BuildContext context) {
    if (ResponsiveBreakpoints.isMobile(context)) {
      return mobile;
    } else if (ResponsiveBreakpoints.isTablet(context)) {
      return tablet ?? mobile;
    } else {
      return desktop;
    }
  }
}

/**
 * 响应式间距配置
 */
class ResponsiveSpacing {
  static const ResponsiveValue<double> small = ResponsiveValue(
    mobile: 8.0,
    tablet: 12.0,
    desktop: 16.0,
  );

  static const ResponsiveValue<double> medium = ResponsiveValue(
    mobile: 16.0,
    tablet: 20.0,
    desktop: 24.0,
  );

  static const ResponsiveValue<double> large = ResponsiveValue(
    mobile: 24.0,
    tablet: 32.0,
    desktop: 40.0,
  );

  static const ResponsiveValue<double> extraLarge = ResponsiveValue(
    mobile: 32.0,
    tablet: 48.0,
    desktop: 64.0,
  );
}

/**
 * 响应式字体大小配置
 */
class ResponsiveFontSize {
  static const ResponsiveValue<double> small = ResponsiveValue(
    mobile: 12.0,
    tablet: 13.0,
    desktop: 14.0,
  );

  static const ResponsiveValue<double> body = ResponsiveValue(
    mobile: 14.0,
    tablet: 15.0,
    desktop: 16.0,
  );

  static const ResponsiveValue<double> subtitle = ResponsiveValue(
    mobile: 16.0,
    tablet: 17.0,
    desktop: 18.0,
  );

  static const ResponsiveValue<double> title = ResponsiveValue(
    mobile: 18.0,
    tablet: 20.0,
    desktop: 22.0,
  );

  static const ResponsiveValue<double> headline = ResponsiveValue(
    mobile: 20.0,
    tablet: 24.0,
    desktop: 28.0,
  );
}

/**
 * 响应式布局配置
 */
class ResponsiveLayoutConfig {
  // 侧边栏宽度
  static const ResponsiveValue<double> sidebarWidth = ResponsiveValue(
    mobile: 0.0,      // 移动端隐藏侧边栏
    tablet: 280.0,    // 平板端显示侧边栏
    desktop: 320.0,   // 桌面端更宽的侧边栏
  );

  // 笔记列表宽度
  static const ResponsiveValue<double> noteListWidth = ResponsiveValue(
    mobile: 0.0,      // 移动端隐藏笔记列表
    tablet: 300.0,    // 平板端显示笔记列表
    desktop: 350.0,   // 桌面端更宽的笔记列表
  );

  // 内容区域最大宽度
  static const ResponsiveValue<double> contentMaxWidth = ResponsiveValue(
    mobile: double.infinity,
    tablet: 800.0,
    desktop: 1000.0,
  );

  // 卡片边距
  static const ResponsiveValue<EdgeInsets> cardMargin = ResponsiveValue(
    mobile: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
    tablet: EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0),
    desktop: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  );

  // 页面内边距
  static const ResponsiveValue<EdgeInsets> pagePadding = ResponsiveValue(
    mobile: EdgeInsets.all(16.0),
    tablet: EdgeInsets.all(20.0),
    desktop: EdgeInsets.all(24.0),
  );
}

/**
 * 响应式网格配置
 */
class ResponsiveGrid {
  /**
   * 获取网格列数
   */
  static int getColumns(BuildContext context, {int? mobile, int? tablet, int? desktop}) {
    if (ResponsiveBreakpoints.isMobile(context)) {
      return mobile ?? 1;
    } else if (ResponsiveBreakpoints.isTablet(context)) {
      return tablet ?? 2;
    } else {
      return desktop ?? 3;
    }
  }

  /**
   * 获取网格间距
   */
  static double getSpacing(BuildContext context) {
    return ResponsiveSpacing.medium.getValue(context);
  }

  /**
   * 获取网格子项宽高比
   */
  static double getAspectRatio(BuildContext context) {
    if (ResponsiveBreakpoints.isMobile(context)) {
      return 16 / 9;
    } else if (ResponsiveBreakpoints.isTablet(context)) {
      return 4 / 3;
    } else {
      return 3 / 2;
    }
  }
}

/**
 * 响应式导航配置
 */
class ResponsiveNavigation {
  /**
   * 判断是否使用底部导航栏
   */
  static bool useBottomNavigation(BuildContext context) {
    return ResponsiveBreakpoints.isMobile(context);
  }

  /**
   * 判断是否使用侧边导航栏
   */
  static bool useSideNavigation(BuildContext context) {
    return !ResponsiveBreakpoints.isMobile(context);
  }

  /**
   * 判断是否使用抽屉导航
   */
  static bool useDrawerNavigation(BuildContext context) {
    return ResponsiveBreakpoints.isMobile(context);
  }
}

/**
 * 响应式工具类
 */
class ResponsiveUtils {
  /**
   * 获取屏幕信息
   */
  static ScreenInfo getScreenInfo(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final size = mediaQuery.size;
    final deviceType = ResponsiveBreakpoints.getDeviceType(context);
    
    return ScreenInfo(
      width: size.width,
      height: size.height,
      deviceType: deviceType,
      orientation: mediaQuery.orientation,
      devicePixelRatio: mediaQuery.devicePixelRatio,
      textScaleFactor: mediaQuery.textScaleFactor,
    );
  }

  /**
   * 计算响应式尺寸
   */
  static double getResponsiveSize(
    BuildContext context, {
    required double mobile,
    double? tablet,
    required double desktop,
  }) {
    if (ResponsiveBreakpoints.isMobile(context)) {
      return mobile;
    } else if (ResponsiveBreakpoints.isTablet(context)) {
      return tablet ?? mobile;
    } else {
      return desktop;
    }
  }

  /**
   * 获取安全区域内边距
   */
  static EdgeInsets getSafeAreaPadding(BuildContext context) {
    return MediaQuery.of(context).padding;
  }

  /**
   * 判断是否为横屏
   */
  static bool isLandscape(BuildContext context) {
    return MediaQuery.of(context).orientation == Orientation.landscape;
  }

  /**
   * 判断是否为竖屏
   */
  static bool isPortrait(BuildContext context) {
    return MediaQuery.of(context).orientation == Orientation.portrait;
  }
}

/**
 * 屏幕信息类
 */
class ScreenInfo {
  final double width;
  final double height;
  final DeviceType deviceType;
  final Orientation orientation;
  final double devicePixelRatio;
  final double textScaleFactor;

  const ScreenInfo({
    required this.width,
    required this.height,
    required this.deviceType,
    required this.orientation,
    required this.devicePixelRatio,
    required this.textScaleFactor,
  });

  /**
   * 是否为小屏设备
   */
  bool get isSmallScreen => width < ResponsiveBreakpoints.mobile;

  /**
   * 是否为中等屏幕设备
   */
  bool get isMediumScreen => 
      width >= ResponsiveBreakpoints.mobile && width < ResponsiveBreakpoints.desktop;

  /**
   * 是否为大屏设备
   */
  bool get isLargeScreen => width >= ResponsiveBreakpoints.desktop;

  /**
   * 屏幕密度类型
   */
  ScreenDensity get density {
    if (devicePixelRatio <= 1.0) return ScreenDensity.low;
    if (devicePixelRatio <= 2.0) return ScreenDensity.medium;
    if (devicePixelRatio <= 3.0) return ScreenDensity.high;
    return ScreenDensity.extraHigh;
  }

  @override
  String toString() {
    return 'ScreenInfo(width: $width, height: $height, deviceType: $deviceType, '
           'orientation: $orientation, devicePixelRatio: $devicePixelRatio, '
           'textScaleFactor: $textScaleFactor)';
  }
}

/**
 * 屏幕密度枚举
 */
enum ScreenDensity {
  low,
  medium,
  high,
  extraHigh,
}